<template>
    <section class="content">
        <Panel :expandable="false" :expand="true">
            <template slot="title">国收申报查询</template>
            <template slot="body">
                <el-form label-width="100px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="申报批次号">
                                <el-select v-model="applyNo" class="full-cell">
                                    <el-option key="all" label="全部" value="" style="position: relative"><span>全部</span>
                                    <!-- <i class="el-icon-refresh" style="position: absolute; right: 24px; top: 8px; font-size: 18px" @click="handleSearchDeclareNo"></i> -->
                                    </el-option>
                                    <el-option v-for="a in applyNoList" :key="a" :label="a" :value="a"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="申报时间">
                                <el-date-picker
                                    v-model="applyDate"
                                    :type="datetimeType"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    class="full-cell"
                                    :value-format="datetimeValueFormat"
                                    >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="padding-left: 12px">
                            <el-button type="success" @click="handleSearch">搜索</el-button>
                            <el-button type="primary" @click="handleAdd">收汇申请</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </Panel>

        <Panel :expandable="false" :hasTitle="false" :expand="true">
            <template slot="title"></template>
            <template slot="body">
                <p style="margin-bottom: 10px">订单总金额：{{totalAmount && (" ￥ " + totalAmount) || ''}}</p>
                <el-table :data="list" header-row-class-name="header-class">
                    <el-table-column prop="applyTime" label="申报日期" align="center">

                    </el-table-column>
                    <el-table-column prop="declareNo" label="申报批次号" align="center">

                    </el-table-column>
                    <el-table-column prop="orderId" label="订单编号" align="center">

                    </el-table-column>
                    <el-table-column prop="statusStr" label="申报状态" align="center">

                    </el-table-column>
                    <el-table-column prop="responseValue" label="申报结果" align="center">

                    </el-table-column>
                </el-table>
                <div class="clear-fix">
                    <el-pagination
                        style="float: right; margin-top: 20px;"
                        background
                        layout="total, prev, pager, next"
                        @current-change="handleCurrentChange"

                        :current-page="searchParam.page"
                        :total="searchParam.total">
                    </el-pagination>
                    <!--@prev-click="handlePrev"
                        @next-click="handleNext"-->
                </div>
            </template>
        </Panel>

        <el-dialog title="收汇申请" :visible.sync="visible" width="1200px">
            <Declare v-if="visible" @commited="handleCommited"></Declare>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="申请收款" :visible.sync="commitVisible">
            <p style="text-align: center">以下本次提交的申请批次号，用来查询国收申请结束，请妥善保管</p>
            <p style="text-align: center; font-weight: bold">{{declareNo}}</p>
        </el-dialog>
    </section>
</template>
<script>
import Panel from '@/components/common/panel'
import instance from '@/api/index.js'
import apiUrls from '@/js/common/apiUrls'
import Declare from './declare'
import {datetimeType, datetimeValueFormat} from '@/js/util'


export default {
    name: 'declare',
    data() {
        return {
            datetimeType: datetimeType,
            datetimeValueFormat: datetimeValueFormat,
            totalAmount: 0,
            searchParam: {
                page: 1,
                rows: 10,
                total: 0
            },
            applyNoList: [],
            applyNo: "", // 申报批次号
            applyDate: [], // 申报日期
            list: [],
            visible: false,
            commitVisible: false,
            declareNo: ""
        }
    },
    components: {
        Panel,
        Declare
    },

    methods: {
        padding(n) {
            if(n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        },
        getDateStr(date) {
            if(date) {
                return date.getFullYear() + "-" + this.padding(date.getMonth()+1) + "-" + this.padding(date.getDate());
            }

            return "";
        },
        getDateTimeStr(date) {
            if(date) {
                return date.getFullYear() + "-" + this.padding(date.getMonth()+1) + "-" + this.padding(date.getDate()) + " " + this.padding(date.getHours()) + ":" + this.padding(date.getMinutes()) + ":" + this.padding(date.getSeconds());
            }

            return "";
        },
        getList() {
            let self = this;
            /**
             *  "declareNo" : "申报号",
                "begin" : "2019-09-01 11:00:00 开始时间",
                "end" : "结束时间",
                "page" : 1
             */
            let param = Object.assign({
                page: this.searchParam.page,
                rows: this.searchParam.rows,
                declareNo: this.applyNo || null,
                begin: this.applyDate && this.applyDate[0] || null,
                end: this.applyDate && this.applyDate[1] || null,
            });

            instance({
                method: 'post',
                url: apiUrls.receive.declareList,
                data: param
            }).then(function (data) {
                if(data.data.success){
                    // TODO: 如果接口中状态没有转换，要自己转换
                    /**
                     * 1：表示申报成功 0:表示申报失败
                     * -2: 公服回调审核失败
                     * 2: 公服回调审核成功
                     */
                    // let statuses = ['申报失败', '申报成功'];
                    let statuses = {
                        "-2": "公服回调审核失败",
                        "0": "申报失败",
                        "1": "申报成功",
                        "2": "公服回调审核成功"
                    };
                    // let orderStatuses = ['未命中', '疑似命中', '异常'];
                    self.list = data.data.data.pageInfo.list.map((item)=>{
                        item.statusStr = statuses[item.status+""] || '';
                        // item.orderStatusStr = orderStatuses[item.orderStatus] || '';
                        // item.applyTimeStr = self.getDateTimeStr(item.applyTime && new Date(item.applyTime));
                        // TODO: 缺少订单状态
                        return item;
                    });
                    self.searchParam.total = data.data.data.pageInfo.total;
                    self.totalAmount = data.data.data.totalMoney;
                }
            }).catch(function (err) {
                console.log(err)
            })
        },

        // 查询
        handleSearch() {
            this.searchParam.page = 1;
            this.getList();
        },

        // 申请弹框
        handleAdd() {
            this.visible = true;
        },

        handleCurrentChange(pageIndex) {
            this.searchParam.page = pageIndex;
            // this.handleSearch();
            this.getList();
        },

        // 提交完成
        handleCommited(declareNo) {
            this.visible = false;
            //  弹出提示告知用户申请编号
            this.declareNo = declareNo;
            this.commitVisible = true;
            this.getApplyNoList();
            this.handleSearch();
        },

        getApplyNoList() {
            let self = this;
            instance({
                method: 'get',
                url: apiUrls.receive.applyNoList
            }).then(function (data) {
                if(data.data.success){
                    self.applyNoList = data.data.data;
                }
            }).catch(function (err) {
                console.log(err)
            });
        },

        handleSearchDeclareNo(e) {
            e.stopPropagation();
            this.getApplyNoList();
        }
    },

    created() {
        this.getApplyNoList();
        this.handleSearch();
    }
}
</script>

<style scoped>
.el-range-separator {
    width: 20px!important;
}
</style>
